<script setup>
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import api from '../api'
import * as echarts from 'echarts';

const chartRef = ref(null);
let myChart = null;



onMounted(async function () {
    let result = await api.get('/api/decodetoken')
    let id = result.data.id
    result = await api.getByID('/api/userbyid', id)
    avatarUrl.value = 'api' + result.data.imgUrl
})
// 假设的头像URL  
const avatarUrl = ref('');

const router = useRouter();

// 处理下拉框命令的方法  
const logout = () => {//退出系统
    window.sessionStorage.clear()
    localStorage.removeItem('token')
    localStorage.removeItem('autoLogin')
    if (localStorage.getItem("REMEMBER_KEY") === "false") {
        localStorage.removeItem("phoneNumber")
        localStorage.removeItem("password")
    }
    router.push('/');
}


</script>


<template>
    <div class="app-container">
        <el-container class="main_container">
            <el-header class="header">
                <div>
                    <el-row style="width: 500px;">
                        <img src="../img/tiger.jpg" style="width: 50px;height: 50px;" />
                        <h4 style="color: aliceblue; margin: 0 10px;">健 身 房 管 理 系 统</h4>
                    </el-row>
                </div>
                <el-dropdown>
                    <span class="el-dropdown-link">
                        <el-avatar :src="avatarUrl" shape="square"></el-avatar>
                    </span>
                    <template #dropdown>
                        <el-dropdown-menu>
                            <el-dropdown-item>账户信息</el-dropdown-item>
                            <el-dropdown-item>重置密码</el-dropdown-item>
                            <el-dropdown-item icon="el-icon-eleme">
                                <el-button type="danger" @click="logout()">退出登录</el-button>
                            </el-dropdown-item>
                        </el-dropdown-menu>
                    </template>
                </el-dropdown>
            </el-header>
            <el-container>
                <el-aside class="aside" width="150px">
                    <el-menu active-text-color="#ffd04b" background-color="#545c64" class="el-menu-vertical-demo"
                        default-active="2" text-color="#fff" @open="handleOpen" @close="handleClose" router="true"
                        width="190px">
                        <el-sub-menu index="1">
                            <template #title>
                                <el-icon>
                                    <User />
                                </el-icon>
                                <span>会员管理</span>
                            </template>
                            <el-menu-item index="1-1" route="member">会员列表</el-menu-item>
                            <el-menu-item index="1-2" route="membertype">会员卡类型</el-menu-item>
                        </el-sub-menu>
                        <el-sub-menu index="2">
                            <template #title>
                                <el-icon>
                                    <Avatar />
                                </el-icon>
                                <span>教练管理</span>
                            </template>
                            <el-menu-item index="2-1" route="trainer">教练列表</el-menu-item>
                        </el-sub-menu>
                        <el-sub-menu index="3">
                            <template #title>
                                <el-icon>
                                    <Reading />
                                </el-icon>
                                <span>课程管理</span>
                            </template>
                            <el-menu-item index="3-1" route="private">私教课套餐</el-menu-item>
                            <el-menu-item index="3-2" route="public">公共课</el-menu-item>
                            <el-menu-item index="3-3" route="privateclass">私教课管理</el-menu-item>
                            <el-menu-item index="3-4" route="order">私教课订单表</el-menu-item>
                        </el-sub-menu>
                        <el-menu-item index="4" route="user">
                            <el-icon>
                                <UserFilled />
                            </el-icon>
                            <span>账号设置</span>
                        </el-menu-item>
                        <el-menu-item index="5" route="charts">
                            <el-icon>
                                <UserFilled />
                            </el-icon>
                            <span>数据统计</span>
                        </el-menu-item>
                    </el-menu>
                </el-aside>
                <el-main>
                    <router-view></router-view>
                </el-main>
            </el-container>
            <el-footer class="footer"></el-footer>
        </el-container>
    </div>
</template>

<style>
.app-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.main_container {
    height: 100%;
}

.header {
    background-color: black;
    color: white;
    display: flex;
    /* 使用 Flexbox 布局 */
    justify-content: space-between;
    /* 水平居中 */
    align-items: center;
    /* 垂直居中，如果需要的话 */
    height: 60px;
    padding: 0 20px;
    font-size: 30px;
}

.aside {
    background-color: #545c64;
}

.footer {
    height: 28px;
    background-color: gold;
}

*:focus {
    outline: none;
}
</style>